
<template>
  <!-- 所有刷具页面 -->
  <div>
    <!-- 头部 -->
    <div class="header">
      <div class="bg">
        <img
          src="https://www.maccosmetics.com.cn/media/export/cms/new_mpp_headers/MPP_all_brushes_1920x480.jpg"
          alt=""
        />
        <!-- 面包屑 -->
        <div class="bread">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item
              v-for="item in $route.meta.nav"
              :key="item.id"
              >{{ item }}</el-breadcrumb-item
            >
          </el-breadcrumb>
        </div>
        <h2>全部刷具-ALL BRUSHES</h2>
      </div>
    </div>
    <!-- 筛选商品 -->
    <div class="container">
      <div class="filtrate">
        <p>观看：商品</p>
        <!-- <div>
          <span>筛选：</span>
          <div>确认</div>
        </div> -->
        <div class="select-list">
          分类
          <div class="sort">
            <div class="sort1">从低到高</div>
            <div>热门推荐</div>
          </div>
        </div>
      </div>
      <!-- 商品列表 -->
      <div class="product_list">
        <productTwo
          v-for="item in items"
          :key="item.id"
          :cover="item.cover"
          :title="item.title"
          :modul="item.modul"
          :price="item.price"
          :pic="item.pic"
          :detail="item.detail"
          :pid="item.pid"
        ></productTwo>
      </div>
    </div>
  </div>
</template>
<script>
import productTwo from "@/components/productTwo";
export default {
  components: {
    productTwo,
  },
  data() {
    return {
      items: [],
      value: "",
      cid: 1,
      page: 1,
      pagesize: 20,

    };
  },
  methods: {
    getItem() {
      let params = { cid: 4, page: 1, pagesize: 20 };
      this.$http.productApi.queryAll(params).then((res) => {
        console.log(res);
        this.items = res.data.data;
      });
    },
  },
  mounted() {
    this.getItem();
  },
};
</script>
<style lang="scss" scoped>
.header {
  width: 100%;
  position: relative;
  .bg {
    height: 300px;
    img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
    }
    .bread {
      position: absolute;
      top: 20px;
      left: 15%;
      ::v-deep .el-breadcrumb__inner {
        color: #fff;
      }
      ::v-deep .el-breadcrumb__separator {
        color: #fff;
      }
    }
    h2 {
      width: 50%;
      text-align: center;
      color: #fff;
      font-size: 7rem;
      position: absolute;
      left: 25%;
      top: 50px;
      word-break: break-all;
    }
  }
}
.container {
  margin: 0 auto;
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  .select-list {
    width: 200px;
    height: 50px;
    background: #000;
    color: #fff;
    font-size: 16px;
    padding-left: 10px;
    position: relative;
    text-align: center;
    line-height: 3;
    overflow: hidden;
    &.active {
      background-color: #fff;
      color: #000;
    }
    .sort {
      color: #000;
      height: 0;
      width: 100%;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
      background: #fff;
      position: absolute;
      top: 50px;
      left: 0;
      display: flex;
      flex-direction: column;

      > div {
        // height: 30px;
        padding: 15px 10px;
        text-align: center;
        line-height: 2;
        &:hover {
          background-color: #000;
          color: #fff;
        }
      }
    }
  }
  .filtrate {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 100px 0 50px;
    div {
      display: flex;
    }
  }
  .product_list {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>